<script setup>
import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
import FormulaEditor from '@/components/FormulaEditor.vue'
import { useFormulaStore } from '@/store/formulaStore'

const formulaStore = useFormulaStore()
formulaStore.initialize()
</script>

<template>
  <TresCanvas window-size antialias>
    <TresPerspectiveCamera :position="[5, 5, 5]" />
    <OrbitControls />

    <TresMesh
      v-for="formula in formulaStore.formulas"
      :key="formula.id"
      :geometry="formula.geometry"
      :material="formula.material"
      :visible="formula.visible"
    />
  </TresCanvas>
  <FormulaEditor />
</template>
